<template>

  <div class='wrap' v-loading="loading"> 
  	<!--营业执照  -->
	<el-row style='margin-top:10px'>
		<el-col :span='8'>
			营业执照
		</el-col>
		<el-col :span='16'>
			<el-row style='height:100px;' :gutter='10'>
				<el-col :span='12' v-for='(val,index) in url_license' :key='index'>
					<img  width="100%" height='100' :src="val">
				</el-col>
				<el-col :span='12' style='height:100px'>
					<div class='img-wrap'>
						<input type="file" ref='license' @change="imgUplode('license','营业执照')" @click='closeOff("营业执照")' multiple>
						<div>
							<span class='el-icon-plus' style='font-size:25px;line-height:100px;'></span>
						</div>
					</div>
				</el-col>
			</el-row>
		</el-col>
	</el-row>
    <!--门头图数据  -->
	<el-row style='margin-top:10px'>
		<el-col :span='8'>
			门头图
		</el-col>
		<el-col :span='16'>
			<el-row style='height:100px;' :gutter='10'>
				<el-col :span='12' v-for='(val,index) in url_more' :key='index'>
					<img  width="100%" height='100' :src="val">
				</el-col>
				<el-col :span='12' style='height:100px'>
					<div class='img-wrap'>
						<input type="file" ref='mentou' @change="imgUplode('mentou','门头大图')" @click='closeOff("门头大图")' multiple >
						<div>
							<span class='el-icon-plus' style='font-size:25px;line-height:100px;'></span>
						</div>
					</div>
				</el-col>
			</el-row>
		</el-col>
	</el-row>
	<!-- 缩略图数据 -->
	<el-row style='margin-top:10px'>
		<el-col :span='8'>
			缩略图
		</el-col>
		<el-col :span='16'>
			<el-row style='height:100px;' :gutter='10'>
				<el-col :span='12' v-for='(val,index) in url_simple' :key='index'>
					<img  width="100%" height='100' :src="val">
				</el-col>
				<el-col :span='12' style='height:100px'>
					<div class='img-wrap'>
						<input type="file" ref='simple' @change="imgUplode('simple','注册商户缩略图')" @click='closeOff("缩略图")' multiple>
						<div>
							<span class='el-icon-plus' style='font-size:25px;line-height:100px;'></span>
						</div>
					</div>
				</el-col>
			</el-row>
		</el-col>
	</el-row>
  	<!-- 文本数据 -->
	<el-row v-for='(val,key) in dataTem' :key='key' style='margin-top:10px;'>
		<el-col :span='8'>
			{{val}}
		</el-col>
		<el-col :span='16'>
			<el-input v-model="registerSeller[key]"></el-input>
		</el-col>
		
	</el-row>
	<!-- 开始营业时间 -->
	<el-row style='margin-top:10px'>
		<el-col :span='8'>
			开始营业时间
		</el-col>
		<el-col :span='16'>
			<el-time-select
			  style='width:100%'
			  v-model="registerSeller.startTime"
			  :picker-options="{
			    start: '05:00',
			    step: '01:00',
			    end: '10:00'
			  }"
			  placeholder="选择时间">
			</el-time-select>
		</el-col>
	</el-row>
	<!-- 结束营业时间 -->
	<el-row style='margin-top:10px'>
		<el-col :span='8'>
			结束营业时间
		</el-col>
		<el-col :span='16'>
			<el-time-select
			  style='width:100%'
			  v-model="registerSeller.endTime"
			  :picker-options="{
			    start: '16:00',
			    step: '01:00',
			    end: '20:00'
			  }"
			  placeholder="选择时间">
			</el-time-select>
		</el-col>
	</el-row>
	<!-- 类型 -->
	<el-row style='margin-top:10px'>
		<el-col :span='8'>
			类型
		</el-col>
		<el-col :span='16'>
			<el-select v-model="registerSeller.types" placeholder="请选择" style='width:100%'>
		      <el-option
		        v-for="item in types_options"
		        :key="item.value"
		        :label="item.label"
		        :value="item.value">
		      </el-option>
		    </el-select>
		</el-col>
	</el-row>
	
   	<el-button @click='submit' style='width:100%;margin-top:10px'>提交</el-button>
  </div>
</template>

<script>
  import {URL_UPIMG,AJAX,URL_REGISTER_SELLER,HREF,_layer} from '@/comm.js'
  export default {
  	beforeCreate(){
  		$("title").text("注册商家");
  	},
    data(){
    	return ({
    		loading:false,
    		imgOff1:[false,false],
    		imgOff2:[false,false],
    		imgOff3:[false,false],
    		types_options: [{
	          value: '1',
	          label: '直营'
	        }, {
	          value: '2',
	          label: '联营'
	        }, {
	          value: '3',
	          label: '普通'
	        }, {
	          value: '4',
	          label: '旗舰'
	        }, {
	          value: '5',
	          label: '大商户'
	        }, {
	          value: '6',
	          label: '其他'
	        }],
	        url_license:[],
    		url_more:[],
    		url_simple:[],
    		registerSeller:{
    			principalTel:'',
    			principalName:'',
    			maintainNum:'',
    			maintainName:'',
    			salesman:'',
    			fullName:'',
    			shortName:'',
    			address:'',
    			//门头图
    			storefrontImgJson:[],  
    			// 缩略图
    			infoImgJson:[],
    			types:'',
    			startTime:'',
    			endTime:'',
    			bossName:'',
    			merchantPhone:'',
    			bossMobile:'',
    			descr:'',
    			// 营业执照图
    			businessLicenseUrl:[]
    		},
    		dataTem:{
    			'principalTel':'负责人电话',
    			'principalName':'负责人名称',
    			'maintainNum':'维护业务员编号',
    			'maintainName':'维护业务员',
    			'salesman':'开发业务员名称',
    			'fullName':'商户全名',
    			'shortName':'商户缩略名',
    			'address':'详细地址',
    			'bossName':'老板姓名',
    			'merchantPhone':'电话座机',
    			'bossMobile':'联系电话',
    			'descr':'商铺简介',
    		}
    	});
    },
    methods:{
    	// 提交数据
    	submit(){
    		let This=this;
    		let subData=this.registerSeller;
    		let notice={
    			'principalTel':'负责人电话不能为空',
    			'principalName':'负责人名称不能为空',
    			'maintainNum':'维护业务员编号不能为空',
    			'maintainName':'维护业务员不能为空',
    			'salesman':'开发业务员名称不能为空',
    			'fullName':'商户全名不能为空',
    			'shortName':'商户缩略名不能为空',
    			'address':'详细地址不能为空',
    			'bossName':'老板姓名不能为空',
    			'merchantPhone':'电话座机不能为空',
    			'bossMobile':'联系电话不能为空',
    			'descr':'商铺简介不能为空',
    			'startTime':'开始营业时间不能为空',
    			'endTime':'结束营业时间不能为空',
    			'types':'类型不能为空'
    		};
    		for(let i in subData){
    			if(i=='storefrontImgJson'||i=='infoImgJson'||i=='businessLicenseUrl'){
    				continue ;
    			}
    			let val=String(subData[i]);
    			if(!val||val=='null'||val=='undefined'){
    				this._layer(notice[i]);
    				return ;
    			}
    		}
    		if(!this.imgOff1[1]){
    			this._layer('门头图不能为空');
    			return ;
    		}
    		if(!this.imgOff2[1]){
    			this._layer('缩略图不能为空');
    			return ;
    		}
    		if(!this.imgOff3[1]){
    			this._layer('营业执照图不能为空');
    			return ;
    		}
    		if(this.checkMobile(subData.principalTel)||this.checkMobile(subData.bossMobile)){
    			return ;
    		}
    		this.loading=true;
    		var time=setInterval(function(){
		        if(This.imgOff1[0]&&This.imgOff2[0]&&This.imgOff3[0]){
		        	subData.storefrontImgJson=JSON.stringify(subData.storefrontImgJson);
    				subData.infoImgJson=JSON.stringify(subData.infoImgJson);
    				subData.businessLicenseUrl=JSON.stringify(subData.businessLicenseUrl);
    				console.log('商家注册参数');
    				console.log(subData)
		             AJAX({
		    	    	method:'post',
		    	    	url:URL_REGISTER_SELLER,
		    	    	data:subData
		    	    },function(data){
		    	    	if(data.data.retult){
		    	    		console.log('注册商家已经提交');
		    	    		_layer('注册商家成功');
		    	    		setTimeout(function(){
		    	    			This.$router.replace({path:'/H5/register-seller.html/SellerNotice'});
		    	    		},2000);
		    	    	}else{
		    	    		_layer('注册商家失败');
		    	    		setTimeout(function(){
		    	    			window.location.href=HREF+'/extension.html';
		    	    		},2000);
		    	    	}
		    	    });
		            This.loading=false;
		            clearInterval(time);
		        }
		     },1);
    	},
    	//每次点击都取消判定，不然有可能会传空图片上去
    	closeOff(type){
    		switch(type){
	    		case '营业执照':
	    			this.imgOff3.splice(1,1,false);
	    			break;
	    		case '门头大图':
	    			this.imgOff1.splice(1,1,false);
	    			break;
	    		case '注册商户缩略图':
	    			this.imgOff2.splice(1,1,false);
	    			break;
	    	}
    	},
    	//上传图片
	    imgUplode(ref,type){
	    	switch(type){
	    		case '营业执照':
	    			this.imgOff3.splice(1,1,true);
	    			break;
	    		case '门头大图':
	    			this.imgOff1.splice(1,1,true);
	    			break;
	    		case '注册商户缩略图':
	    			this.imgOff2.splice(1,1,true);
	    			break;
	    	}
	    	let This=this;
	    	let form=new FormData();
	    	for (let i = 0; i < this.$refs[ref].files.length; i++) {
	          form.append('file', this.$refs[ref].files[i])
	        }
	    	form.append('type',type);
	    	AJAX({
	    		method:'post',
	    		url:URL_UPIMG,
	    		headers:{'Content-Type':'multipart/form-data'} ,
	    		data:form,
	    	},function(res){
	    		console.log('图片');
	    		console.log(res);
    			switch(type){
    				case '营业执照': //营业执照  url_license
    				    This.registerSeller.businessLicenseUrl=res.data.data;
    					This.url_license=res.data.data;
    					This.imgOff3.splice(0,1,true);
    					break;
    				case '门头大图': //门头大图  url_more
    				    This.registerSeller.storefrontImgJson=res.data.data;
    					This.url_more=res.data.data;
    					This.imgOff1.splice(0,1,true);
    					break;
    				case '注册商户缩略图': //缩略图    url_simple
    				    This.registerSeller.infoImgJson=res.data.data;
    					This.url_simple=res.data.data;
    					This.imgOff2.splice(0,1,true);
    					break;
    			}
	    	  }
	    	);
	    },
	    //弹窗
	    _layer(content){
	    	layer.open({ 
				content: content,
				skin: "msg",
				time: 3, 
				shift:1,  
				shadeClose:true   
			});
	    },
	    //验证手机号正则
	    checkMobile(sMobile){ 
	       if(!(/^1[3|4|5|8][0-9]\d{8}$/.test(sMobile))){ 
	        this._layer('请输入正确的手机号');
	        return true; 
	       }else{
	        return false;
	       }
	    },
    }
  }
</script>

<style scoped>
	.wrap{
		padding:15px;
		line-height:40px;
		background: -webkit-linear-gradient(top, #f5f7fa, #67c23a12);
	}
	.img-wrap{
		position:relative;
		width:100%;
	}
	.img-wrap input{
		position:absolute;
		z-index:2;
		width:100%;
		height:100px;
		opacity:0
	}
	.img-wrap div{
		position:absolute;
		z-index:1;
		width: 100%;
		height: 100px;
		border:1px dashed #ccc;
		text-align:center;
	}
</style>


